<template>
  <div class="company-details">
    <TitleBar title="企业专页" bgColor="#ab9844" color="#fff" :backFunction="goBack"></TitleBar>
    <div class="company-box">
      <div class="company-top">
        <div class="company-top-shape">
          <img src="./assets/left.png" alt="">
        </div>
        <div class="company-top-content">
          <h1 class="company-ranking">第<span>{{ranking}}</span>名</h1>
          <h5 class="votes-text" v-if="voteShow">投票数：</h5>
          <h2 class="votes-number" v-if="voteShow">{{votes}}</h2>
        </div>
        <div class="company-top-shape">
          <img src="./assets/right.png" alt="">
        </div>
      </div>
      <div class="company-img-box" :style="{'background-image':'url('+img+')'}"></div>
      <div class="company-info-item">
        <span class="company-info-name">品牌名称:</span>
        <span class="company-info-content">{{companyName}}</span>
      </div>
      <div class="company-info-item">
        <span class="company-info-name">品牌行业:</span>
        <span class="company-info-content">{{industry}}</span>
      </div>
      <div class="company-info-item">
        <span class="company-info-name">企业网址:</span>
        <span class="company-info-content">{{site}}</span>
      </div>
      <div class="company-info-item">
        <span class="company-info-name">企业名称:</span>
        <span class="company-info-content">{{wholeName}}</span>
      </div>
      <div class="company-info-item">
        <span class="company-info-name">企业地址:</span>
        <span class="company-info-content-2">{{address}}</span>
      </div>
      <div class="company-bottom">
        <div class="company-qrcode">
          <img :src="qrcode" alt="">
        </div>
        <div class="share-tip">
          <p v-for="(item, index) in codeText" :key="index">{{item}}</p>
        </div>
      </div>
      <p class="ranking-number-bg">{{ranking}}</p>
    </div>
  </div>
</template>

<script>
import TitleBar from '../../components/TitleBar'
import consts from '../../common/consts'
import "../../common/php"

export default {
  components: {
    TitleBar
  },
  data() {
    return {
      ranking: '',
      votes: '',
      img: '',
      companyName: '',
      industry: '',
      site: '',
      wholeName: '',
      address: '',
      qrcode: '',
      codeText: [],
      isPhoneWx: false,
      categoryStatus: -1
    }
  },
  computed: {
    voteShow() {
      return this.categoryStatus !== 3 && this.categoryStatus !== 4 && this.isPhoneWx
    }
  },
  mounted() {
    if (window.sessionStorage.getItem('categoryStatus')) {
      this.categoryStatus = parseInt(JSON.parse(window.sessionStorage.getItem('categoryStatus')))
    }
    this.isPhoneWx = this.$getDeviceInfo().isWeiXin && this.$getDeviceInfo().isPhone
    // this.$showLoading()
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.$api.getBrandDetail(this.$route.query.catid, {
        itemid: this.$route.params.itemid
      }).then(data => {
        if (parseInt(data.data.status) === 1) {
          this.$hideLoading()
          const info = data.data.info
          this.ranking = info.ranking
          this.votes = info.vote_count
          this.img = info.thumb
          this.companyName = info.title
          this.industry = info.catname
          this.site = info.homepage
          this.wholeName = info.gongsi
          this.address = info.dizhi
          this.getCodeUrl(data.data.brand_ewm_link)
          this.codeText = data.data.brand_ewm_text
        } else {
          this.$toast.center(data.data.msg)
        }
      }).catch(err => {
        this.$hideLoading()
        console.log(err)
      })
    },
    getCodeUrl(str) {
      this.qrcode = str
    },
    goBack() {
      this.$router.back()
    }
  }
}
</script>

<style scoped lang="scss">
.company-details {
  width: 100%;
  height: 100vh;
  background-color: #ab9844;
  position: relative;
  .company-box {
    position: absolute;
    top: 0.88rem;
    left: 0.3rem;
    right: 0.3rem;
    bottom: 0.3rem;
    background: #fff url(./assets/bg.png) center no-repeat;
    background-size: cover;
    border-radius: 0.2rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .company-top {
    width: 4.1rem;
    margin: 0 auto 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .company-top-shape {
    min-width: 0.84rem;
    img {
      width: 0.84rem;
      height: auto;
    }
  }
  .company-top-content {
    min-width: 2.4rem;
    text-align: center;
    h1 {
      font-size: 0.4rem;
      color: #c4b77c;
      span {
        display: inline-block;
        margin: 0 0.1rem;
        font-size: 0.6rem;
      }
    }
    h5 {
      margin-top: 2.5vh;
      font-size: 0.24rem;
      color: #bababa;
      font-weight: normal;
    }
    h2 {
      margin-top: 1vh;
      font-size: 0.4rem;
      color: #fc7508;
    }
  }
  .company-img-box {
    margin: 0 auto 0 auto;
    width: 2.5rem;
    height: 1.56rem;
    background: center no-repeat;
    background-size: contain;
  }
  .company-info-item {
    width: 100%;
    padding: 0 0.5rem;
    .company-info-name {
      display: inline-block;
      font-size: 0.24rem;
      color: #999;
      vertical-align: top;
    }
    .company-info-content {
      display: inline-block;
      margin-left: 0.42rem;
      font-size: 0.28rem;
      color: #333;
      width: 4.2rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .company-info-content-2 {
      display: inline-block;
      margin-left: 0.42rem;
      font-size: 0.28rem;
      color: #333;
      width: 4.2rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-inline-box;
      -webkit-line-clamp: 2;
      /* autoprefixer: ignore next */
      -webkit-box-orient: vertical;
    }
  }
  .company-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .company-qrcode {
    position: relative;
    width: 1.88rem;
    height: 1.88rem;
    z-index: 3;
    img {
      position: absolute;
      width: 100%;
      height: 100%;
      padding: 0.5rem 3.9rem 0 1rem;
      box-sizing: content-box;
      top: -0.5rem;
      left: -1rem;
    }
  }
  .share-tip {
    margin-left: 0.32rem;
    font-size: 0.26rem;
    color: #999;
    text-align: center;
  }
  .bg-ranking {
    font-size: 3rem;
    color: rgba(196, 183, 124, 0.15);
    text-align: center;
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translate3d(0, -1.5rem, 0);
  }
  .ranking-number-bg {
    font-size: 3rem;
    font-weight: bold;
    color: #c4b77c;
    opacity: 0.15;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
